<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
>
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>考勤统计图</title>

</head>

<body class="timo-layout-page">
<span style="font-size: 25px;color: cornflowerblue;position: absolute;left: 50%;z-index: 999">考勤异常次数统计</span>

<div id="main" style="height:500px;width:900px;">

</div>
<script th:src="@{/js/plugins/echarts/echarts.js}" charset="utf-8"></script>
<script th:replace="/common/template :: script"></script>
<script>
    layui.use(['element', 'laydate', 'form'], function () {
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;


        var render = function (date) {
            if (!date) return;
            //获取当月考勤数据
            $.ajax({
                type: 'GET',
                url: '/business/attendance/getStatReport/' + date,
                success: function (res) {
                    if (res && res.code === 200) {
                        var data = res.data;
                        var length = data.length;
                        var source = [];
                        debugger;
                        for (var i = 0; i < length; i++) {
                            var elem = [];
                            var userName = data[i].userName;
                            var lateTimes = data[i].lateTimes;
                            elem[0] = userName;
                            elem[1] = lateTimes;
                            source.push(elem);
                        }

                        option = {
                            dataset: [
                                {
                                    dimensions: ['name', 'times'],
                                    source: source
                                },
                                {
                                    transform: {
                                        type: 'sort',
                                        config: {dimension: 'times', order: 'desc'}
                                    }
                                }
                            ],
                            xAxis: {
                                type: 'category',
                                axisLabel: {interval: 0, rotate: 30}
                            },
                            yAxis: {},
                            series: {
                                type: 'bar',
                                encode: {x: 'name', y: 'times'},
                                datasetIndex: 1
                            }
                        };


                        option && myChart.setOption(option);

                    }
                },
            });
        }

        $('#query').click(function () {
            var date = $('#date').val();
            if (!!date) {
                date = date.replace('-', '');
            }

            render(date);
        });


        laydate.render({
            elem: '#date',
            type: 'month'
        });
    });

</script>
<div style="width: 100%">
    <div class="layui-inline">
        <label class="layui-form-label">考勤月份</label>
        <div class="layui-input-block">
            <input style="width: 200px" id="date" type="text" name="date" readonly="readonly" class="layui-input"/>
        </div>

    </div>
    <div class="layui-inline">
        <button class="layui-btn" id="query">
            查询
        </button>
    </div>
</div>
</body>
</html>